<template>
	<view>
		<view class="auth">
			<view class="wanl-title">继续完善资料</view>
			<form @submit="formSubmit">
				<view class="avatar">
					<image :src="$wanlshop.oss(user.avatar, 62, 62, 2, 'avatar')" mode="aspectFit"></image>
				</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input placeholder="请输入昵称" confirm-type="next" placeholder-class="placeholder" name="name"
						v-model="name"></input>
				</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input placeholder="请输入手机号" confirm-type="next" placeholder-class="placeholder" name="mobile"
						v-model="mobile"></input>
				</view>
				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock" formType="submit">发送验证码</button>
				</view>
			</form>
		</view>
		<uni-popup ref="authPopup">
			<view class="wanl-auth-popup bg-white radius-bock text-center">
				<view class="avatar">
					<image :src="$wanlshop.appstc('/common/logo.png')" mode="aspectFill"></image>
				</view>
				<view class="margin-tb-lg text-sm wanl-gray">
					亲，首次登录系统，需要获取您的昵称、头像进一步完善资料！
				</view>
				<!-- 1.0.7 升级 -->
				<button v-if="canIUseGetUserProfile" type="primary" class="cu-btn sl radius-bock bg-no margin-bottom"
					@tap="getUserProfile">确定授权new</button>
				<button v-else type="primary" class="cu-btn sl radius-bock bg-no margin-bottom" open-type="getUserInfo"
					@tap="getUserInfo">确定授权</button>
				<button class="cu-btn sl radius-bock" @tap="refuseUserInfo">拒绝</button>
			</view>
		</uni-popup>

	</view>
</template>
<script>
	import graceChecker from '@/common/graceChecker';
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				userInfo: {
					avatarUrl: '',
					nickName: null,
					gender: 0
				},
				mobile:"",
				name:"",
				pageroute: '',
				provider: null,
				timer: null,
				third_id: 0,
				canIUseGetUserProfile: false ,// 1.0.7 升级
				openid:''
			};
		},
		computed: {
			...mapState(['user'])
		},
		onLoad(option) { 
			this.pageroute = option.url?option.url:'/pages/user';
			this.third_id = option.third_id;
			this.openid = option.openid
			if (option.platform == 'mp_weixin' || option.platform == 'app_weixin') {
				this.provider = 'weixin'
			} else if (option.platform == 'mp_qq' || option.platform == 'app_qq') {
				this.provider = 'qq'
			} else if (option.platform == 'app_weibo') {
				this.provider = 'sinaweibo'
			} else if (option.platform == 'app_xiaomi') {
				this.provider = 'xiaomi'
			} else if (option.platform == 'apple') {
				this.provider = 'apple'
			}
			// // 1.0.7 升级
			// if (uni.getUserProfile) {
			// 	this.canIUseGetUserProfile = true
			// } else {
			// 	this.getUserInfo()
			// }
			// 获取用户信息
			// #ifdef MP-WEIXIN || MP-QQ
			// setTimeout(() => {
			// 	// 获取用户信息
			// 	if (!this.userInfo.nickName) {
			// 		// this.$refs.authPopup.open();
			// 	} else {
			// 		// 获取手机号avatarUrl  gender nickName
			// 		// 后续版本升级
			// 	}
			// }, 100);
			// #endif
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			getUserInfo() {
				uni.showLoading({
					title: '拉取授权中..'
				});
				this.$refs.authPopup.close();
				if (this.timer) {
					clearInterval(this.timer);
				} else {
					// 1.0.7 升级
					this.timer = setInterval(() => {
						this.setUserInfo();
					}, 1000);
				}
			},
			// 1.0.7 升级
			getUserProfile() {
				uni.showLoading({
					title: '拉取授权中..'
				});
				this.$refs.authPopup.close();
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: (infoRes) => {
						this.userInfo = infoRes.userInfo;
						uni.hideLoading();
					}
				})
			},
			// 获取用户信息
			setUserInfo() {
				uni.getUserInfo({
					provider: this.provider,
					success: (infoRes) => {
						this.userInfo = infoRes.userInfo;
						uni.hideLoading();
					}
				});
				// 如果存在，终止进程
				if (this.userInfo.nickName) {
					if (this.timer) {
						clearInterval(this.timer);
						this.timer = null;
					}
				}
			},
			formSubmit(e) {
				const that = this 
				//定义表单规则
				var rule = [{
					name: 'mobile',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				}];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				console.log(that.pageroute)
				console.log(checkRes)
				if (checkRes) {
				
					this.$wanlshop.to(`validcode?event=changemobile&mobile=${this.mobile}&name=${this.name}&url=${this.pageroute}&openid=${this.openid}`,'slide-in-bottom',200);
					// this.$api.post({
					// 	url: '/wanlshop.user/changemobile',
					// 	data: {
					// 		// third_id: this.third_id,
					// 		// avatarUrl: this.userInfo.avatarUrl,
					// 		// nickName: this.userInfo.nickName,
					// 		// gender: this.userInfo.gender
					// 		mobile: that.mobile
					// 	},
					// 	success: res => {
					// 		// this.$store.dispatch('login', res);
					// 		// this.$store.dispatch('login');
					// 		// this.$store.dispatch('get');
					// 		uni.reLaunch({
					// 			url: decodeURIComponent(that.pageroute)
					// 		});
					// 	}
					// });
				} else {
					this.$wanlshop.msg('请填写手机号');
				}
			},
			refuseUserInfo() {
				this.$wanlshop.back(1);
			},
		}
	};
</script>

<style>
	@import url("auth.css");

	.avatar {
		display: flex;
		justify-content: center;
		flex: 1;
		margin-bottom: 80rpx;
	}

	.avatar image {
		border-radius: 9999px;
		overflow: hidden;
		height: 200rpx;
		width: 200rpx;
	}

	.wanl-auth-popup {
		position: fixed;
		right: 60rpx;
		left: 60rpx;
		top: 100rpx;
		bottom: 200rpx;
		padding: 50rpx;
	}

	.wanl-auth-popup .avatar {
		margin-top: 80rpx;
		margin-bottom: 100rpx;
	}

	.wanl-auth-popup .cu-btn {
		height: 90rpx;
		width: 100%;
	}
</style>
